<template>
	<view v-if="!List" class="home-model">
		<view style="line-height: 400px;text-align: center;color: #999999;">加载中…</view>
	</view>
	<view v-else class="home-model">
		<view class="title">
			<view>选择模板</view>
			<view class="close" @click="close">+</view>
		</view>
		<view class="bannerbox">
			<view v-for="(item, index) in List" @click="cimage(item)">
				<image :src="item.bannerfile" mode="aspectFill" class="bannerfile"></image>
				<view style="text-align: center;margin-left: 30rpx;">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
const db = uniCloud.database();
export default {
	name: 'home-model',
	data() {
		return {
			List: []
		};
	},
	created() {
		db.collection('opendb-banner').get().then(res=>{
			this.List = res.result.data
		})
	},
	methods: {
		cimage(item) {
			this.$emit('cimage', item);
			this.close()
		},
		close(){
			this.$emit('close', false);
		}
	}
};
</script>

<style scoped>
.title {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #eeeeee;
		text-align: center;
		font-weight: bold;
	}
.home-model {
	position: absolute;
	bottom: 0;
	z-index: 111;
	width: 750rpx;
	height: 650rpx;
	background-color: #fefefe;
	border-radius: 30rpx 30rpx 0 0;
}
.bannerbox {
	margin: 20rpx 0;
	padding-right: 30rpx;
	display: flex;
	overflow-x: scroll;
}
.bannerfile {
	width: 280rpx;
	margin-left: 30rpx;
	background-color: #808080;
}
.close {
	position: absolute;
	left: 700rpx;
	top: -6rpx;
	z-index: 1111;
	font-size: 50rpx;
	transform: rotate(45deg);
}
</style>
